<template>
    <el-dialog
            :title="title"
            :visible.sync="dialogFormVisible"
            width="500px"
            @close="close"
    >
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model.trim="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item label="描述">
                        <el-input v-model.trim="form.description" type="textarea" :rows="5"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="save" :loading="loading" :disabled="disabled">
                {{ loading ? '确定中 ...' : '确定' }}
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { save,getOne} from '@/api/warningDeductPoints'

    export default {
        name: 'lxEdit',
        data() {
            return {
                loading: false,
                disabled: false,
                form: {
                    name: '',
                    point: '',
                    description: '',
                },
                rules: {
                    name: [{required: true, trigger: 'blur', message: '请输入名称'}],
                    point: [{required: true, trigger: 'blur', message: '请输入得分'}],
                },
                title: '',
                dialogFormVisible: false,
            }
        },
        created() {
        },
        methods: {
            async fetchData() {
                const {data} = await getOne(this.form)
                console.log('data',data)
                this.form = data
            },
            showDia(row) {
                if (!row) {
                    this.title = '添加'
                } else {
                    this.title = '编辑'
                    this.form.id = row;
                    // this.form = Object.assign({}, row)
                    this.fetchData()
                }
                this.dialogFormVisible = true
            },
            close() {
                this.$refs['form'].resetFields()
                this.form = this.$options.data().form
                this.dialogFormVisible = false
            },
            save() {
                if (this.loading) {
                    return
                }
                this.$refs['form'].validate(async (valid) => {
                    if (valid) {
                        this.loading = true
                        this.disabled = true
                        this.timer = setTimeout(() => {
                            setTimeout(() => {
                                this.loading = false
                                this.disabled = false
                            }, 400)

                          save(this.form).then((res) => {
                                if (res.code == 0) {
                                    this.$baseMessage(res.msg, 'success')
                                    this.$emit('fetch-data');
                                    this.close()
                                } else {
                                    this.$baseMessage('失败', 'error')
                                }
                            })
                        }, 2000)
                    } else {
                        return false
                    }
                })
            },

        },
    }
</script>
